<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {background: #45dfff;}
	#c1,span {background: #fff;}
	</style>
	<script type="text/javascript">
	window.onload = function () {
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');
		
		//设置绘图样式（样式要先设置，就像是画图工具一样）
		oGC.lineWidth = 20;						//没有px

		//边界连接点样式
		oGC.lineJoin = 'round';				//圆角
		// oGC.lineJoin = 'bevel';			//斜角。其中miter(默认)
		
		//绘制方块
		oGC.strokeRect(50.5, 50.5, 100, 100); 	// 带有1px黑色边框的方块(如果L和H的是整数的话,边框会变成2px)
	}
	</script>
</head>
<body>
	<canvas id="c1" width="600" height="400"> <!-- 宽高在这里设置 -->
		<span>不支持canvas的浏览器</span>
	</canvas>
</body>
</html>